import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/widgets.dart';
import 'package:mobile_app.home.core/core/presentation/theme/home_core_theme.dart';
import 'package:mobile_app.home.core/core/presentation/widgets/card_button.dart';

class TranslationSelectionCardCorrectAnswerButton extends StatefulWidget {
  const TranslationSelectionCardCorrectAnswerButton({
    required this.title,
    required this.colorAnimationController,
    required this.onPressed,
    this.autoSizeGroup,
    super.key,
  });

  final String title;
  final AnimationController colorAnimationController;
  final VoidCallback onPressed;
  final AutoSizeGroup? autoSizeGroup;

  @override
  State<TranslationSelectionCardCorrectAnswerButton> createState() =>
      _TranslationSelectionCardCorrectAnswerButtonState();
}

class _TranslationSelectionCardCorrectAnswerButtonState
    extends State<TranslationSelectionCardCorrectAnswerButton> {
  late Animation<Color?> _colorAnimation;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    final colorTween = ColorTween(
      begin: HomeCoreTheme.of(context).cardButtonColor,
      end: HomeCoreTheme.of(context).translationSelectionCardCorrectAnswerButtonColor,
    );

    _colorAnimation = CurvedAnimation(
      parent: widget.colorAnimationController,
      curve: Curves.easeOutExpo,
    ).drive(colorTween);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _colorAnimation,
      builder: (context, child) {
        return CardButton(
          color: _colorAnimation.value,
          onPressed: widget.onPressed,
          child: child!,
        );
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 8,
          horizontal: 14,
        ),
        child: AutoSizeText(
          widget.title,
          style: HomeCoreTheme.of(context).textTheme.cardButton,
          textAlign: TextAlign.center,
          maxLines: 2,
          stepGranularity: 0.1,
          wrapWords: false,
          minFontSize: 8,
          overflow: TextOverflow.ellipsis,
          group: widget.autoSizeGroup,
        ),
      ),
    );
  }
}
